<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="num++">+</button>
        <q-header :a="num" cc="个" title="杨凯斐"></q-header>
<hr>
        <button @click="num1++">+</button>
        <q-afei aa="吃了" :b="num1" bb="块" heihei="蛋糕"></q-afei>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref,computed} = Vue
    const fei = createApp({
        setup(){
            let num =ref('0')
            let num1 =ref('0')
            return{
                num,
                num1
            }
        }
    })
    fei.component('q-header',{
        props:{
            cc:String,
            a:{
                type:[String,Number],
                required:true,
                validator(val){
                    if(val <=10){
                        return  true
                    }
                    throw new Error('还点，大笨蛋')
                    return false
                }
            },
            title:String
        }, 
        setup(props){
            let cc = props.cc
            let title = props.title
            let a = computed(function(){
                return props.a
            })
            return{
                title,
                a,
                cc
            }
        },
        template:`<div class="header">
            {{a}}
            {{cc}}
            {{title}}</div>`
    })


    fei.component('q-afei',{
        props:{
            aa:String,
            bb:String,
            b:{
                type:[String,Number],
                required:true,
                validator(val){
                    if(val <=10){
                        return  true
                    }
                    throw new Error('吃不下了，要撑死了 ')
                    return false
                }
            },
            heihei:String
        },   
        setup(props){
            let aa = props.aa
            let bb = props.bb
            let heihei = props.heihei
            let b = computed(function(){
                return props.b
            })
            return{
                heihei,
                b,
                aa,
                bb
            }
        },
        template:`<div class="afei">
            {{aa}}
            {{b}}
            {{bb}}
            {{heihei}}</div>`
    })
    
    fei.mount('#app')
</script>
</html>